<template>
	<view class="wrap">
		<view style="background: linear-gradient( 180deg, #FFEEEB 0%, #F8F8FA 100%);height: 310rpx;position: relative;">
			<u-navbar @leftClick="back()" title="場地版登入" placeholder bg-color="transparent">
			</u-navbar>

		</view>

		<view class="form">
			<view class="title">場地版登入</view>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="账号" prop="login_account"  placeholder="請輸入帳號">
					<u--input v-model="form.login_account" border="none"></u--input>
				</u-form-item>
				<u-form-item label="密碼" prop="login_password"  >
					<u--input type="password" v-model="form.login_password" placeholder="請輸入密碼" border="none"></u--input>
				</u-form-item>
			</u--form>
			<view class="btn" @click="login()">
				登入
			</view>
		</view>
	</view>
</template>

<script>
	import API from "./request.js"
	export default {
		data() {
			return {
				form: {
					login_account: "",
					login_password: "",
				},
				rules: {
					login_account: {
						require: true,
						message: "請輸入帳號",
						trigger: ['blur', 'change'],
					},
					login_password: {
						require: true,
						message: "請輸入密碼",
						trigger: ['blur', 'change'],
					}
				}
			}
		},
		methods: {
			async login(){
				await API.request('post','/device/login', this.form)
					.then(async res => {
						uni.setStorageSync('DB_userinfo', res)
						uni.setStorageSync('dbToken', res.token)
						// uni.navigateTo({
						// 	url: "/pages/cart/cart"
						// })
						uni.navigateTo({
							url: "./info"
						})
						// await API.request('post', '/device/getDeviceInfo').then(res => {
						// 	console.log(res)
						
						// })
					})
			
				
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		background-color: #F8F8FA;
		min-height: 100vh;
	}
	.form {
		padding: 200rpx 80rpx 0;
		
		::v-deep .u-form-item {
			border-radius: 20rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			height: 100rpx;
			padding: 0 30rpx;
			.u-form-item__body {
				padding: 0;
				flex: 1;
			}
		}
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #141936;
			margin-bottom: 50rpx;
			position: relative;
			z-index: 1;
			&::before {
				content: "";
				width: 100rpx;
				height: 12rpx;
				background: linear-gradient( 180deg, #E56316 0%, rgba(229,99,22,0) 100%);
				position: absolute;
				bottom: 0;
				left: 20rpx;
				z-index: 0;
			}
		}
	}

	.btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(130deg, #F69792 0%, #EA4D44 100%);
		border-radius: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 28rpx;
		margin-top: 80rpx;
	}
</style>